/**
 * 字母导航，只需在目标页面对需要导航的节点使用字母作为id标示即可.
 * 然后调用 letterNavigator.init()进行字母导航的初始化.
 * @param {Object} w
 */
(function(w){
    var letterNavigator = function(){};
    var letters= ['A','B','C','D','E','F','G','H','I','J','K','M','L','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','#'],
    letterIndex = 0,//选择的字母的索引
    wellNo = "wellNo",//#号转换
    pLabel,//字母弹出框
    positionOpts;
    
    /**
     * 初始化字母导航
     * @param {opts} 设置,可以配置导航条的垂直位置,格式为{top:xx,bottom:xx}.默认使用整个页面高度
     */
    letterNavigator.prototype.init = function(opts){
        var top = opts.top || 0;
        var bottom = opts.bottom || 0;
        positionOpts = {top:top,bottom:bottom};
        var letterHeight = (document.querySelector('body').clientHeight-top-bottom)/letters.length;
        pLabel = initPopup();
        renderNavigator({top:top,height:letterHeight});
        //拖动结束
        document.querySelector('.navigator-bar').addEventListener("dragend",function(){
           closePopup();
        });
        //拖动事件
        document.querySelector('.navigator-bar').addEventListener("drag",function(e){
            e.detail.gesture.preventDefault();
            var touchTarget = e.detail.gesture.targetTouches[0];
            var mouseY = touchTarget.clientY;
            var currentLetterIndex = parseInt((mouseY-top)/letterHeight);
            if(letterIndex != currentLetterIndex){//当字母发生了改变才执行滚动
                letterIndex = currentLetterIndex;
                var letter = letters[currentLetterIndex]; 
                if(letter){//判断字母是否合法，排除当前滑动到字母滚动栏区域外
                    scrollToLetter(letter);
                }
            }
        });
        
        //右边导航字母点击事件(简易版的mui.on绑定)
        document.querySelector(".navigator-bar").addEventListener("tap",function(e){
            var letterTarget = e.target;
            if(letterTarget.parentNode==this){
                var name = letterTarget.getAttribute('name');
                scrollToLetter(name);
                setTimeout(function(){
                    closePopup();
                },300);
            }
        });
    };
    //初始化字母弹出框
    function initPopup(){
        var popup = document.createElement("div");
        popup.setAttribute("class","popup-label");
        popup.appendChild(document.createElement("span"));
        document.body.appendChild(popup);
        return popup;
    }
    //渲染字母导航条
    function renderNavigator(opts){
        var templateNode = document.createElement("div");
        var fragment = document.createDocumentFragment();
        var height = opts.height+"px";
        for(var index in letters){
            var letterNode = templateNode.cloneNode();
            var letter = letters[index];
            if(letter == "#"){
                letterNode.setAttribute("name",wellNo);
            }else{
                letterNode.setAttribute("name",letter);
            }
            letterNode.innerHTML = letter;
            letterNode.style.height = height;
            fragment.appendChild(letterNode);
        }
        var navigatorBar = templateNode.cloneNode();
        navigatorBar.setAttribute("class","navigator-bar");
        navigatorBar.style.top = opts.top+"px";
        navigatorBar.appendChild(fragment);
        document.body.appendChild(navigatorBar);
    }
    //字母导航定位函数
    function scrollToLetter(letter){
        showPopup(letter);
        if(letter == "#"){
            letter = wellNo;
        }
        var ulNode = document.querySelector("#"+letter);
        var ulOffsetTop = ulNode.offsetTop;
        window.scrollTo(0, ulOffsetTop-positionOpts.top);
    }
    //显示字母popup
    function showPopup(name){
        var letter = name;
        if(name == wellNo){
            letter = '#';
        }
        pLabel.querySelector('span').innerHTML = letter;
        pLabel.style.display = "block";
    }
    //关闭字母popup
    function closePopup(name){
        pLabel.style.display = "none";
    }
    
    w.letterNavigator = new letterNavigator();
})(window);
